<!--
 * @Date: 2024-11-21 15:35:50
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-02-18 10:47:15
 * @Description: 数据面板2
-->
<template>
  <div class="data-board-panel">
    <div class="data-board-header">
      <div>{{ schema.label }}</div>
    </div>
    <div class="data-board-body">
      <div class="data-board-item">
        <div class="item-label text-over-ellipsis">
          <span>{{ schema.label1 || '标题1' }}</span>
        </div>
        <div class="item-value text-over-ellipsis">
          <CountRoll
            :value="data[dataKeys.v1] || 0"
            :class="[ eventFuncHook.onClickClass('onClick1') ]"
            @click="eventFuncHook.onClick(data, { funcKey: 'onClick1' })"
          />
        </div>
      </div>
      <div class="data-board-item">
        <div class="item-label text-over-ellipsis">
          <span>{{ schema.label2 || '标题2' }}</span>
        </div>
        <div class="item-value text-over-ellipsis">
          <CountRoll
            :value="data[dataKeys.v2] || 0"
            :class="[ eventFuncHook.onClickClass('onClick2') ]"
            @click="eventFuncHook.onClick(data, { funcKey: 'onClick2' })"
          />
        </div>
      </div>
      <!-- <div class="data-board-item">
        <div class="item-value text-over-ellipsis">
          <span>{{ data[dataKeys.v3] || 0  }}</span
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { commonProps } from '@hp/panels/cfg.js'
import { watch, ref, computed, onMounted, nextTick } from 'vue'; 

import { useDbSource } from '@hp/hooks/useDbSource.js'
import { useEventFunc } from '@hp/hooks/useEventFunc.js'

import CountRoll from '@hp/comps/count-roll'

const emits = defineEmits([ 'mounted' ])
const props = defineProps({
  ...commonProps
})

// 数据对象
const data = ref({})
// 数据的关键字
const dataKeys = computed(() => {
  return props.schema.dataKeys
})
// 数据源相关操作
const dbsourceHook = useDbSource({ ...props })
// 事件函数相关操作
const eventFuncHook = useEventFunc({ ...props })
/**
 * 加载数据
 */
const loadData = async () => {
  data.value = {}
  const res = await dbsourceHook.loadDataSource(props.schema)
  data.value = res ?? {}
}
/**
 * 重新加载数据
 * 
 * @param params 参数
 */
const reloadData = async (params={}) => {
  const res = await dbsourceHook.loadDataSource(props.schema, params)
  data.value = res || {}
}

onMounted(() => {
  nextTick(() => { emits('mounted') })
})

watch(
  () => props.schema.dataSource,
  (nv, ov) => {
    loadData()
  },
  { deep: true, immediate: true }
)

defineExpose({
  loadData,
  reloadData
})

</script>

<style lang="scss" scoped>
@use '@hp/panels/base.scss' as *;
.data-board-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  .data-board-header {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
  .data-board-body {
    flex: 1;
    min-height: 10px;
    height: 100%;
    display: grid;
    gap: 12px 12px;
    padding: 0 12px 12px 12px;
    grid-template-columns: repeat(2, minmax(50px,1fr));
    align-items: center;
  }
  .data-board-item {
    text-align: center;
    .item-label {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .item-value {
      font-size: 24px;
      font-weight: 600;
      color: var(--el-color-primary);
    }
  }
}
</style>